{% extends '_base.html' %}
{% load static %}
{% block maincontent %}
<div class="col-md-5">
  <ol class="breadcrumb">
    <li><a class="text-primary" href="{% url 'hospital' %}">Home</a></li>
    <li class="text-primary">Doctors</li>
  </ol>
</div>

<!--doctor team-->
<section id="doctor-team" class="section-padding">
  <style>
    /* ======= DOCTOR TEAM 3D STYLING ======= */
    #doctor-team {
      background: linear-gradient(145deg, #0d1025, #141a33);
      color: #fff;
      position: relative;
      padding: 100px 0;
      overflow: hidden;
    }

    #doctor-team::before {
      content: "";
      position: absolute;
      top: -100px;
      right: -100px;
      width: 300px;
      height: 300px;
      background: radial-gradient(circle, rgba(0, 209, 255, 0.25), transparent 70%);
      filter: blur(120px);
      animation: floatGlow 10s ease-in-out infinite alternate;
    }

    @keyframes floatGlow {
      from { transform: translateY(0); }
      to { transform: translateY(40px); }
    }

    .ser-title {
      text-align: center;
      font-size: 2.5rem;
      font-weight: 700;
      color: #00d1ff;
      text-shadow: 0 0 20px rgba(0, 209, 255, 0.6);
      margin-bottom: 10px;
    }

    .botm-line {
      width: 80px;
      height: 4px;
      border: none;
      background: linear-gradient(90deg, #00d1ff, #007bff);
      border-radius: 10px;
      margin: 10px auto 60px;
    }

    /* ======= DOCTOR CARD ======= */
    .thumbnail {
      background: rgba(255, 255, 255, 0.05);
      border: 1px solid rgba(255, 255, 255, 0.1);
      border-radius: 18px;
      padding: 20px;
      box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4);
      transition: all 0.4s ease;
      backdrop-filter: blur(8px);
      text-align: center;
      overflow: hidden;
      position: relative;
    }

    .thumbnail:hover {
      transform: translateY(-8px) scale(1.02);
      box-shadow: 0 15px 35px rgba(0, 209, 255, 0.4);
      border-color: rgba(0, 209, 255, 0.4);
    }

    .team-img {
      width: 100%;
      height: 250px;
      object-fit: cover;
      border-radius: 15px;
      box-shadow: 0 0 15px rgba(0, 209, 255, 0.3);
      transition: transform 0.4s ease;
    }

    .thumbnail:hover .team-img {
      transform: scale(1.05);
    }

    .caption {
      margin-top: 20px;
    }

    .caption h3 {
      font-size: 1.3rem;
      font-weight: 600;
      color: #00eaff;
      margin-bottom: 5px;
      text-shadow: 0 0 8px rgba(0, 209, 255, 0.4);
    }

    .caption p {
      color: #cfd8dc;
      font-size: 0.95rem;
      margin-bottom: 15px;
    }

    /* ======= SOCIAL ICONS ======= */
    .list-inline {
      padding-left: 0;
      margin: 0;
      list-style: none;
      display: flex;
      justify-content: center;
      gap: 15px;
    }

    .list-inline li a {
      color: #00d1ff;
      background: rgba(255, 255, 255, 0.1);
      border-radius: 50%;
      width: 40px;
      height: 40px;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.3s ease;
      box-shadow: inset 0 0 10px rgba(0, 209, 255, 0.2);
    }

    .list-inline li a:hover {
      background: linear-gradient(90deg, #00d1ff, #007bff);
      color: #fff;
      box-shadow: 0 0 15px rgba(0, 209, 255, 0.7);
      transform: scale(1.15);
    }

    @media (max-width: 768px) {
      .ser-title {
        font-size: 2rem;
      }
      .team-img {
        height: 200px;
      }
    }
  </style>

  <div class="container">
    <div class="row">
      <div class="col-md-12">
        <h2 class="ser-title">Meet Our Doctors!</h2>
        <hr class="botm-line">
      </div>

      {% for doctor in object_list %}
      <div class="col-md-3 col-sm-6 col-xs-12 mb-4">
        <div class="thumbnail">
          <img src="{{ doctor.picture.url }}" alt="{{ doctor.name }}" class="team-img">
          <div class="caption">
            <h3>Dr. {{ doctor.name }}</h3>
            <p>{{ doctor.speciality }}</p>
            <ul class="list-inline">
              {% if doctor.facebook %}
              <li><a href="{{ doctor.facebook }}"><i class="fa fa-facebook"></i></a></li>
              {% endif %}
              {% if doctor.twitter %}
              <li><a href="{{ doctor.twitter }}"><i class="fa fa-twitter"></i></a></li>
              {% endif %}
              {% if doctor.instagram %}
              <li><a href="{{ doctor.instagram }}"><i class="fa fa-instagram"></i></a></li>
              {% endif %}
            </ul>
          </div>
        </div>
      </div>
      {% endfor %}
    </div>
  </div>
</section>
<!--/ doctor team-->
{% endblock maincontent %}